<template>
  <div h8 flex class="concave" of-auto>
    <div flex-shrink-0 bg-blue-5 c-white w='1rem' flex items-center justify-center>N</div>
    <input flex-basis-0 w0 flex-1 border-none outline-none min-w="3rem"
      :value="modelValue"  @change="$emit('update:modelValue', parseFloat(($event.target as any).value))"/>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  modelValue: number
}>()
defineEmits<{
  (e: 'update:modelValue', event: number): void,
}>()
</script>

<style lang="scss">
.var-input-number .el-input__wrapper {
  background: #fff;
  border-bottom: 2px solid dodgerblue;
  border-right: 2px solid dodgerblue;
  overflow: hidden;

  .el-input__inner {
    color: #000;
  }
}
</style>